<!--
*  功能描述：绩效管理：按钮项目考核
 -->
<template>
  <div class="page">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-row>
            <el-col :span="16">
              <div class="zuo">
                <div class="dingbu">
                  <span>设置考核项目</span>
                </div>
                <div class="zhong">
                  <div class="zhongshang">当前考核项目:</div>
                  <div class="zhongxia">
                    <template>
                      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection">
                        </el-table-column>
                        <el-table-column label="序号">
                          <template slot-scope="scope">{{
                            scope.row.AssPrjectId
                          }}</template>
                        </el-table-column>
                        <el-table-column prop="AssPrjectName" label="考核项目名称">
                        </el-table-column>
                        <el-table-column prop="AssPrjectPartState" label="是否参与" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="考核名称" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <el-button @click="addName(scope.row.AssPrjectId)">添加考核名称</el-button>
                          </template>

                        </el-table-column>

                      </el-table>
                    </template>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="7">
              <!-- 显示小考核项目 -->
              <div class="you">
                设置考核名称
              </div>
              <div class="zhongxia">
                <template>
                  <el-table ref="multipleTable" :data="tableData1" tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column prop="PrName" label="考核名称">
                    </el-table-column>
                    <el-table-column label="考核分类">
                      <template slot-scope="scope">
                        <el-button size="mini" @click="TypeAdd(scope.row.PrId)">添加</el-button>
                      </template>

                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button size="mini" @click="TypeUpdate(scope.row.PrId)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="TypeDelete(scope.row.PrId)">删除</el-button>
                      </template>
                    </el-table-column>

                    <el-table-column prop="PrFinished" label="已完成">
                      <template slot-scope="scope">
                        {{scope.row.PrFinished}}%
                      </template>
                    </el-table-column>
                    <el-table-column prop="PrUnfinished" label="未完成">
                      <template slot-scope="scope">
                        {{scope.row.PrUnfinished}}%
                      </template>
                    </el-table-column>
                    <el-table-column prop="AssPrjectName" label="任务名称">
                    </el-table-column>
                  </el-table>
                </template>
              </div>

              <el-show v-if="addType">
                <!-- 显示分类 -->
                <div class="zhongxia">
                  <template>
                    <el-table ref="multipleTable" :data="tableDataType" tooltip-effect="dark" style="width: 100%"
                      @selection-change="handleSelectionChange">
                      <el-table-column prop="DicName" label="考核类型名称">
                      </el-table-column>
                      <el-table-column prop="ClassScale" label="规模(万平方米)">
                      </el-table-column>
                      <el-table-column prop="ClassDifficulty" label="系数">
                      </el-table-column>
                      <el-table-column prop="ClassFictitious" label="虚拟产值(万元)">
                      </el-table-column>
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button type="danger" size="mini" @click="DeleteClass(scope.row.ClassId)">删除</el-button>
                          <el-button size="mini" @click="Editlass(scope.row.ClassId)">编辑</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </template>
                </div>
              </el-show>
              <el-show v-if="addType">
                <!-- 添加分类 -->
                <div class="tianjia">
                  <el-form ref="form" :model="formDataType" label-width="80px">
                    <el-form-item label="建筑类型">
                      <el-select v-model="formDataType.ClassTypeId" placeholder="请选择客户类型">
                        <el-option v-for="item in options" :key="item.DicId" :label="item.DicName" :value="item.DicId">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="实际规模">
                      <el-input v-model="formDataType.ClassScale"></el-input>
                    </el-form-item>
                    <el-form-item label="难度系数">
                      <el-input v-model="formDataType.ClassDifficulty"></el-input>
                    </el-form-item>
                    <el-form-item label="虚拟产值">
                      {{formDataType.ClassScale*formDataType.ClassDifficulty}}
                    </el-form-item>
                    <el-form-item>
                      <el-show v-if="osubit">
                        <el-button type="primary" @click="onSubmit">添加</el-button>
                      </el-show>

                      <el-show v-if="osubupdate">
                        <el-button type="primary" @click="UpdateonSubmit">修改</el-button>
                      </el-show>
                      <el-button>取消</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-show>
              <!-- 添加小考核项目 -->
              <el-show v-if="addxiao">
                <div class="tianjia">
                  <el-form ref="formData" :model="form" label-width="80px">
                    <el-form-item label="考核名称">
                      <el-input v-model="form.PrName"></el-input>
                    </el-form-item>
                    <el-form-item label="整体绩效">
                      <el-input v-model="form.PrPerformance"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                      <el-input v-model="form.PrNote"></el-input>
                    </el-form-item>
                    <el-form-item label="当前完成比例">
                      <el-input v-model="form.PrFinished">
                      </el-input>
                    </el-form-item>
                    <el-form-item label="未完成比例">
                      <el-input v-model="form.PrUnfinished"></el-input>
                    </el-form-item>
                    <el-form-item label="历史完成比例">
                      <el-input v-model="form.PrHistory"></el-input>
                    </el-form-item>
                    <el-form-item label="合计">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.PrTotal"></el-input>

                      </template>

                    </el-form-item>

                    <el-form-item>
                      <el-show v-if="add">
                        <el-button type="primary" @click="PostAssSmaliProjec">保存</el-button>
                      </el-show>
                      <el-show v-if="upde">
                        <el-button type="primary" @click="UpdateAssSmaliProjec">修改</el-button>
                      </el-show>
                      <el-button>取消</el-button>

                    </el-form-item>

                  </el-form>
                </div>
              </el-show>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      tableData1: [],
      tableDataType: [],
      form: {
        PrId: 0,
        PrName: '',
        AssPrjectId: '',
        PrPerformance: 0,
        PrNote: '',
        PrFinished: 0,
        PrUnfinished: 0,
        PrHistory: 0,
        PrTotal: 0,
      },
      formDataType: {//添加分类
        ClassId: 0,
        ClassTypeId: '',
        ClassScale: '',
        ClassDifficulty: '',
        ClassFictitious: '',
        PrId: 0,
      },
      id: '',//大项目考核
      ids: 0,//考核分类
      addType: false,
      addxiao: false,
      options: [],
      add: false,
      upde: false,
      osubit: false,
      osubupdate: false,
    }
  },
  methods: {
    addName (id) {//大考核添加考核名称
      this.form = {};
      this.addxiao = true;
      this.addType = false;
      this.add = true;
      this.upde = false;
      this.id = id;
      this.showAssSmaliProjec();
    },
    showAssessmentPrjec () {//显示大考核项目
      var id = this.$route.params.id;
      this.$http({
        url: 'AssProject/GetAssessmentPrjec',
        method: 'get',
        params: {
          id: id
        }
      })
        .then(res => {
          this.tableData = res.data
        })
    },
    PostAssSmaliProjec () {//添加小考核项目
      if (this.form.PrName == undefined) {
        alert('考核名称不能为空');
        return;
      }
      const age = /^[0-9]*$/;
      if (!age.test(this.form.PrPerformance)) {
        alert('整体绩效不是数字')
        return;
      }
      if (!age.test(this.form.PrFinished)) {
        alert('当前完成比例不是数字')
        return;
      }
      if (!age.test(this.form.PrUnfinished)) {
        alert('未完成比例不是数字')
        return;
      }
      if (!age.test(this.form.PrHistory)) {
        alert('历史完成比例不是数字')
        return;
      }
      this.form.AssPrjectId = this.id
      this.$http({
        url: 'AssProject/AddAssSmaliProjec',
        method: 'post',
        data: this.form
      })
        .then(res => {
          if (res.data > 0) {
            this.$message.success('添加成功');
            this.showAssSmaliProjec();
          }
        })
    },
    showAssSmaliProjec () {//显示小考核项目
      this.$http({
        url: 'AssProject/GetViewAssClassSmali',
        method: 'get',
        params: {
          ids: this.id
        }
      })
        .then(res => {
          this.tableData1 = res.data
        })
    },
    TypeUpdate (id) {//小考核反填
      this.addxiao = true;
      this.addType = false;
      this.add = false;
      this.upde = true;
      this.$http({
        url: 'AssProject/GetAssSmaliProjecFT',
        method: 'get',
        params: {
          id: id
        }
      })
        .then(res => {
          this.form = res.data
        })
    },
    TypeAdd (id) {//考核分类按钮
      this.osubit = true;
      this.osubupdate = false;
      this.addxiao = false;
      this.addType = true;
      this.ids = id
      this.showType();
    },
    UpdateonSubmit () {//修改考核分类
      this.$http({
        url: 'AssProject/PutAssClass',
        method: 'put',
        data: this.formDataType
      })
        .then(res => {
          if (res.data > 0) {
            this.$message.success('修改成功');
            this.showType();
          }
        })
    },
    showType () {//显示分类
      this.$http({
        url: 'AssProject/GetAssClass',
        method: 'get',
        params: {
          ids: this.ids
        }
      })
        .then(res => {
          this.tableDataType = res.data
        })
    },
    showDic () {//建筑类型
      this.$http({
        url: 'Institutionalsetting/selecDic',
        mounted: 'get',
        params: {
          DicCode: 'A_c'
        }
      })
        .then(res => [
          this.options = res.data.Data,
        ])
    },
    onSubmit () {//添加分类
      this.formDataType.PrId = this.ids
      this.formDataType.ClassFictitious = this.formDataType.ClassScale * this.formDataType.ClassDifficulty
      this.$http({
        url: 'AssProject/AddAssClass',
        method: 'post',
        data: this.formDataType
      })
        .then(res => {
          if (res.data > 0) {
            this.$message.success('添加成功');
            this.showType();
            return;
          }
        })
    },
    DeleteClass (id) {//删除分类
      if (confirm('确定删除吗？')) {
        this.$http({
          url: 'AssProject/DelAssClass',
          method: 'delete',
          params: {
            id: id
          }
        })
          .then(res => {
            if (res.data > 0) {
              this.$message.success('删除成功');
              this.showType();
            }
          })
      }
    },
    Editlass (id) {//反填分类
      this.osubit = false;
      this.osubupdate = true;
      this.$http({
        url: 'AssProject/GetAssClassFT',
        mounted: 'get',
        params: {
          id: id
        }
      })
        .then(res => [
          this.formDataType = res.data,
        ])
    },
    UpdateAssSmaliProjec () {//修改小项目考核
      this.$http({
        url: 'AssProject/PutAssSmaliProjec',
        method: 'put',
        data: this.form
      })
        .then(res => {
          if (res.data > 0) {
            this.$message.success('修改成功');
            this.showAssSmaliProjec();
            return;
          }
        })
    },
    TypeDelete (id) {//删除小项目考核
      if (confirm('确定删除吗？')) {
        this.$http({
          url: 'AssProject/DelAssSmaliProjec',
          method: 'delete',
          params: {
            id: id
          }
        })
          .then(res => {
            if (res.data > 0) {
              this.$message.success('删除成功');
              this.showAssSmaliProjec();
            }
          })
      }
    }
  },
  created () {
    this.showAssessmentPrjec();
    this.showDic();
  }
}
</script>

<style>
.zuo {
  border: 1px solid;
}
.dingbu {
  border: 1px solid;
  background-color: dodgerblue;
  color: white;
}

.zuoshang {
  width: 95%;
  border: 1px solid;
  text-align: center;
  height: 40px;
  margin: auto;
}
.zhong {
  width: 95%;
  margin: auto;
  border: 1px solid;
  margin-top: 10px;
}
.zhongshang {
  border: 1px solid;
}
.zhongxia {
  border: 1px solid;
  margin-top: 10px;
}

.you {
  border: 1px solid;
  background-color: dodgerblue;
  color: white;
}
.tianjia {
  margin-top: 10px;
  padding-top: 20px;
  border: 1px solid;
}
.a {
  width: 200px;
  padding-top: 20px;
  padding-left: 50px;
}
</style>